<template>
  <el-dialog
    top="30px"
    title="详情"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-form :inline="true">
      <el-form-item>
        <el-input
          class="form-control-ml"
          v-model="params.apply_batch_no"
          placeholder="批次号"
          clearable
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()" :loading="loading">查询</el-button>
      </el-form-item>

      <el-form-item>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('十二大产业贷')"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <div class="card my-2">
      <div class="card-body" v-loading="countLoading">
        <div>合计：</div>
        <span class="text-muted">
          提交项目数
          <span class="text-danger">{{ countData.p }}</span>
        </span>
        <span class="text-muted ml-5">
          提交金额：
          <span class="text-danger">{{ countData.p1 }}</span>
          万元，
        </span>
        <span class="text-muted ml-5">
          通过项目数：
          <span class="text-danger">{{ countData.p2 }}</span>
        </span>
        <span class="text-muted ml-5">
          通过金额：
          <span class="text-danger">{{ countData.p3 }}</span>
          万元
        </span>
      </div>
    </div>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData"></c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <detail-dialog :visible.sync="viewVisible" :batch-id="batchId"></detail-dialog>
  </el-dialog>
</template>

<script>
import DetailDialog from '@/cadmin/views/count/DetailDialog'
import { exportTable } from '@/bank/plugins/export'
import { baseTableColumns, dataAdapter } from '@/bank/views/limit/index'
export default {
  components: {
    DetailDialog,
  },
  props: {
    visible: Boolean,
    bankType: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      tableName: 'project_approval_batch_bank_view',
      loading: false,
      params: {
        index: 1,
        size: 10,
      },
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '提交批次', prop: 'apply_batch_no', align: 'center' } },
        { attrs: { label: '提交数量', prop: 'project_count', align: 'center' } },
        { attrs: { label: '提交总额(万元)', prop: 'project_funds', align: 'center' } },
        { attrs: { label: '通过数量', prop: 'project_count_approval', align: 'center' } },
        { attrs: { label: '通过金额(万元)', prop: 'project_funds_approval', align: 'center' } },
        { attrs: { label: '项目总额(万元)', prop: 'project_funds', align: 'center' } },
        {
          attrs: { label: '提交日期', prop: 'create_time', align: 'center' },
          process: v => (v || '').substring(0, 10),
        },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [{ name: '查看', event: this.handleView }],
        },
      ],
      viewBatchData: {},
      viewVisible: false,
      batchId: '',
      exportLoading: false,

      countLoading: false,
      countData: {},
    }
  },
  computed: {},
  watch: {
    bankType: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    exportExcel(name) {
      this.exportLoading = true
      exportTable({
        columns: [
          ...baseTableColumns,
          {
            attrs: { label: '批次号', prop: 'apply_batch_no', align: 'left', width: '110px' },
          },
        ],
        table: 'datum_one_county_industry',
        params: { 'bank_type.eq': this.bankType, 'review_approval.in': '4,5,6,7' },
        order: { create_time: 'desc' },
        adapter: dataAdapter,
        filename: name,
      }).finally(() => {
        this.exportLoading = false
      })
    },

    handleView(row = {}) {
      this.batchId = row.apply_batch_id
      this.viewVisible = true
    },
    getCountData() {
      this.countLoading = true
      const { index, size, ...params } = this.params
      this.$api
        .getData(this.$serviceName, this.tableName, {
          ...params,
          groupFunc:
            'round(sum(project_count)),round(sum(project_funds)|2),round(sum(project_count_approval)),round(sum(project_funds_approval)|2)',
        })
        .then(res => {
          const data = res?.data ?? []
          this.countData = data?.[0] ?? {}
        })
        .finally(() => {
          this.countLoading = false
        })
    },
    getData() {
      if (!this.bankType) {
        return
      }

      this.loading = true
      this.params['bank_type.eq'] = this.bankType
      this.getCountData()
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, { create_time: 'desc' })
        .then(res => {
          this.tableData = res?.data?.data ?? []
          this.totalCount = res?.data?.totalCount ?? 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
